<template>
  <div class="blog">
    <div class="blog-box">
        <BlogSearchbar />
    </div>
  </div>
</template>

<style scoped>
.blog {
  height: 100%;
}

.blog-box {
  width: 1050px;
  min-height: 600px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}
</style>

<script>
import BlogEditor from "@/components/BlogEditor.vue";
import BlogSearchbar from "@/components/BlogSearchbar.vue";
import BlogDisplay from "@/components/BlogDisplay.vue";
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';

export default {
  name: "Blogs",
  components: {
    BlogEditor,
    BlogSearchbar,
    BlogDisplay
  },
  data() {
    return {
      showEditor: false
    };
  },
  methods:{
    goTo(path){
      this.$router.replace(path);
    },
    display(){
      this.showEditor=!this.showEditor;
      this.$router.replace("/blogDisplay");
    }
  }
};
</script>
